<template>
    <div>
      <div><h2 style="color: #ffe26c">明星植物展区</h2></div>
      <el-carousel :interval="4000" type="card" height="250px" style="width: 1100px;margin-left:80px">
        <el-carousel-item v-for="item in starPlantList" :key="item">
<!--          <h3>{{item.plantName}}</h3>-->
          <img v-if="item.avatar" :src="item.avatar" height="250px" width="400px" @click="$refs.plantDialog.open(item)">

        </el-carousel-item>
      </el-carousel>
      <div class="community" >
        <el-form>
          <el-row>
            <el-col :span="24">
              <div class="community_title" style="text-align: left;margin-left: 30px;margin-top: 0">Flora社区专区</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" style="left: 200px"v-for="(part,index) in partList" :key="'part'+part.categoryId">
<!--              <div>{{getPlantCategoryStr(plant.categoryId)}}</div>-->
              <div class="partListBox">
                <section style="background-color:rgba(175,227,255,0.18);">
                  <div style="height: 120px;display:grid;background-color: rgba(167,215,252,0.18)">
                    <a :href="'#/ArticlePage?cid='+part.plantCategoryId"><h1 style="margin-top: 45px">{{part.plantCategoryName}}专区</h1></a>
                  </div>
                </section>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <plant-dialog ref="plantDialog" title="植物信息"></plant-dialog>
    </div>

</template>

<script>
import {getPlantCategoryList} from "@/api/plantCategory";
import {getHotPlants} from "@/api/plant";
import plantDialog from "@/components/page/community/plantDialog";
export default {
  name: "Community",
  components:{
    plantDialog
  },
  data(){
    return{
      starPlantList:[],
      partList:[1,2,3,4],

    }

  },
  created() {
    this.routeChange()
  },
  mounted() {
    this.routeChange()
  },
  methods:{
    getStarPlants(){
      getHotPlants().then(res=>{
        console.log("starplants:",res)
        this.starPlantList=res
      })
    },
    getPartList(){
      getPlantCategoryList().then(res=>{
        //console.log(res)
        this.partList=res.records
      })
    },
    routeChange(){
      this.getPartList()
      this.getStarPlants()
    }
  }

}
</script>

<style scoped>
.partListBox{
  position: relative;
}
.partListBox section {
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 1px;
  margin-bottom: 50px;
  margin-left: 80px;
  border-radius: 5px;
  right: 50px;
  top: 23px;
  bottom: 0px;
}
.partListBox section:hover {
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.el-carousel__item h3 {
  /*color: rgba(71, 86, 105, 0.98);*/
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  /*background-color: rgba(153, 169, 191, 0.04);*/
}

.el-carousel__item:nth-child(2n+1) {
  /*background-color: rgba(211, 220, 230, 0.98);*/
}
.community_title{
  font-weight: bold;
  font-size: x-large;
  color: #51e1be;
}
.community{
  width: 1100px;
  height: auto;
  padding-top: 40px;
  background-color: white;
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* height: 500px; */
  border-radius: 5px;
  background-color: white;
  box-shadow:0 0 25px #cac6c6;
}
</style>